<template>
	<view class="">
		<scroll-view class="scroll-box" style="height: 100vh;" @scrolltolower="onScrollToLower" :scroll-y="true">
			<!-- 素材列表 -->
			<view class="video-Box">
				<view v-for="(item,index) in fodderList" :key="index" class="lists" @click="preview(item, index)">
					<image :class="{'mask':addCarList.some(asc => asc.mediaId === item.mediaId)}" :src="item.coverUrl"
						v-if="item.coverUrl" mode="widthFix"></image>
					<image v-show="addCarList.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
						:src="imageUrl + 'xuanzhong.png'" mode=""></image>
					<view class="play" v-if="item.mediaId === '' "><i></i></view>
				</view>
			</view>
			<view class="srcoll-bottom">
				<p v-if="kongEnd">加载中...</p>
				<p v-else>没有更多了~</p>
			</view>
		</scroll-view>


		<!-- 视频播放弹窗 -->
		<uni-popup ref="popupskiingVideo" class="skiingVideo-Box">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCloseVideo()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width: 100%;" v-if="videoUrl" :src="videoUrl">
					<view class="shuiyin">哇咔咔wakaka</view>
					<!-- 加入·购物车-->
					<view class="skiingVideo-button" :class="indexVideoIsLike?'active':''">
						<image @click="linkBtn" :src="isCartBtn ? imageUrl + 'index/jiagouOk.png' : imageUrl + 'index/jiagou.png'" mode="aspectFit"></image>
					</view>
				</video>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		searchMedia,
		getMediaInfoi
	} from '@/api/service.js'
	import {
		setKongList,
		getKongList,
		getUserData
	} from '@/utils/storage.js'
	import imageConfig from '@/utils/images.js'
	import videoPlay from '@/pages/index/components/video-play/video-play.vue'
	export default {
		components: {
			videoPlay,
		},
		data() {
			return {
				imageUrl: imageConfig.uploadImageUrl,
				// 全部素材数据
				fodderList: [],
				// 加入购物车的素材
				addCarList: getKongList() || [],
				// 预览视频地址
				videoUrl: '',
				videoData: '', // 预览素材
				// 是否在购物车
				addCarName: '添加素材',
				kongEnd: true,
				pageNum: 1,
				orderTotal: 0,
				isCartBtn: false,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 视频下拉刷新
			onScrollToLower() {
				// 滚动触底事件处理逻辑
				console.log('滚动触底事件')
				if (this.pageNum === Math.ceil(this.orderTotal / 10)) {
					this.kongEnd = false
					console.log('当前数:', this.fodderList.length, '总数:', this.orderTotal)
				} else {
					this.pageNum = ++this.pageNum
					console.log('上拉加载', this.pageNum,"总数:",this.orderTotal)
					this.getList()
				}
			},
			// 获取空镜素材
			getList() {
				searchMedia({
					Action: 'SearchMedia',
					userId: getUserData().id,
					mediaType: 'Image',
					ownerType: 'Public',
					mamEntityId: 'SkiingClip',
					businessType: 'SceneryShot',
					pageNo: this.pageNum,
					pageSize: 12
				}).then(res => {
					console.log(res, 'aaaa')
					this.fodderList = [...this.fodderList, ...res.mediaInfoList]
					this.orderTotal = res.total
				})
			},
			// 关闭素材弹窗
			toCloseVideo() {
				this.$refs.popupskiingVideo.close()
			},
			// 打开素材弹窗
			preview(item, index) {
				console.log('item---------: ', item)
				console.log('index--------: ', index)
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: item.mediaId,
					urlUseage: 'Play'
				}).then(res => {
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					this.videoData = res.mediaInfo
					console.log(this.videoData,'7878787')
				})
				this.videoData = item
				this.$refs.popupskiingVideo.open("bottom")

				if (this.addCarList.some(asc => asc.mediaId === item.mediaId)) {
					this.addCarName = '取消添加'
				} else {
					this.addCarName = '添加素材'
				}

				if (this.addCarList.some(item => item.mediaId === this.videoData.mediaId)) {
					this.isCartBtn = true
				} else {
					this.isCartBtn = false
				}
				setKongList(this.addCarList)
			},

			// 添加素材
			linkBtn() {
				if (this.addCarList.some(item => item.mediaId === this.videoData.mediaId)) {
					this.isCartBtn = false
					this.addCarList = this.addCarList.filter(item => item.mediaId !== this.videoData.mediaId);
					setKongList(this.addCarList)
					return
				}
				if(this.addCarList.length >= 5) {
					uni.showToast({
						title:"最多选择5个",
						icon:"error"
					})
					return
				}
				this.isCartBtn = true
				let aa = getKongList() ? getKongList() : []
				let bb = []
				let cc = []
				bb.push(this.videoData)
				cc = aa.concat(bb)
				this.addCarList = cc
				console.log('this.addCarList----------: ', this.addCarList)
				this.cartNun += 1
				setKongList(this.addCarList)
			},


		}
	}
</script>

<style lang="less">
	page {
		background-color: #f2f6f9;
	}

	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>

<style lang="less" scoped>
	@import url('@/static/style/kongjing.less');
</style>